<template>
    <div>
        <!--轮播-->
        <van-swipe :autoplay="3000" indicator-color="white" v-if="ads['pos-9']">
            <van-swipe-item v-for="(banner, index) in ads['pos-9']" :key="index" style="text-align: center">
                <img v-lazy="banner.url" style="max-width: 100%" @click="link(banner.link)">
            </van-swipe-item>
        </van-swipe>

        <div style="width: 100%;display: flex;flex-wrap:wrap;padding: 0 15px" v-if="ads['pos-10']">
            <div v-for="(channel, index) in ads['pos-10']" style="width: 20%;padding: 15px 10px 0px;">
                <div @click="link(channel.link)" :key="index">
                    <img v-lazy="channel.url" style="max-width: 100%;">
                </div>
            </div>
        </div>

        <van-row style="margin-top: 20px;">
            <van-col span="24">
                <div style="padding:0 10px;" v-if="ads['pos-11'] && ads['pos-11'].length >= 2">
                    <van-col span="12" style="padding: 5px 1px 5px 0;">
                        <img :src="ads['pos-11'][0].url"
                             @click="link(ads['pos-11'][0].link)"
                             style="width: 100%; background-color:#fff;border-radius: 5px">
                    </van-col>
                    <van-col span="12" style="padding: 5px 0">
                        <div class="lrcont">
                            <img :src="ads['pos-11'][1].url"
                                 @click="link(ads['pos-11'][1].link)"
                                 style="width: 100%; background-color:#fff;border-radius: 5px">
                        </div>
                    </van-col>
                </div>
                <div style="padding:0 5px;" v-if="ads['pos-12'] && ads['pos-12'].length >= 2">
                    <van-col span="12">
                        <div class="bcont">
                            <img :src="ads['pos-12'][0].url"
                                 @click="link(ads['pos-12'][0].link)" alt="">
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="bcont">
                            <img :src="ads['pos-12'][1].url"
                                 @click="link(ads['pos-12'][1].link)" alt="">
                        </div>
                    </van-col>
                </div>
            </van-col>
        </van-row>

        <!--流行趋势-->
        <P style="font-size: 20px; font-weight: bold;padding: 10px 10px 0 10px;color: #333333;">榜单大赏</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">FASHION BRANDS</p>

        <van-row style="margin-top: 10px; position: relative;" gutter="20" v-if="ads['pos-24'] && ads['pos-24'].length > 0">
            <van-col span="24" @click="link(ads['pos-24'][0].link)">
                <img :src="ads['pos-24'][0].url" style="width: 100%">
            </van-col>
            <div style="clear:both;"></div>

            <div style="padding: 72px 35px 15px 35px; position: absolute;top:0;left:0;width:100%;">
                <van-col span="8" v-for="(img, i) in ads['pos-14']" :key="i" @click="link(img.link)" style="padding:0">
                    <img :src="img.url" style="width: 100%">
                </van-col>
            </div>

        </van-row>

        <P style="font-size: 20px; font-weight: bold;padding: 10px 10px 0 10px;color: #333333;">为你推荐</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">ELABORATE SELECTION</p>
        <van-row>
            <van-col span="12" v-for="(newGood ,index) in goodsList"
            >
                <div style="padding:3px">
                    <div
                            :key="index"
                            style="border-radius: 5px; background-color:#fff; overflow: hidden;padding: 5px"
                    >
                        <router-link :to="{ path: `/items/detail/${newGood.id}`}">
                            <img :src="newGood.picUrl" style="width: 100%;"/>
                            <p style="font-size: 15px; color: #333; font-weight: bold; padding: 10px 0px 5px 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                {{newGood.name}}
                            </p>
                            <div style="padding:10px 0px 5px 10px;position: relative;bottom: 10px; color:#ab956d; font-size: 13px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                ￥{{newGood.retailPrice}}
                                <span v-show="newGood.modelPrice">+{{newGood.modelPrice}}</span>
                                <s style="color:#cccccc;float: right;position: relative;right: 1px;font-size: 12px">原价￥{{newGood.counterPrice}}</s>
                            </div>
                        </router-link>
                    </div>
                </div>

            </van-col>
        </van-row>
    </div>
</template>

<script>
    import { goodsList, adPositionList, adAll } from '@/api/api';
    import {
        Swipe,
        SwipeItem
    } from 'vant';

    export default {
        name: 'girl',
        data() {
            return {
                ads: {},
                goodsList: []
            };
        },
        async created() {
            this.ads = await adAll('9,10,11,12,13,14,24');

            this.initViews();
        },
        methods: {
            link(path) {
                const newPath = 'http://' + path;
                window.location.href = newPath;
            },
            initViews() {
                this.getGoodsList('0', '女生')
            },

            getGoodsList(cates, gender){
                goodsList({
                    categoryId: cates,
                    gender: gender,
                    page: 1,
                    limit: 10
                }).then(res => {
                    this.goodsList = res.data.data.list;
                    this.loading = false;
                });
            },
        },
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem
        }
    };
</script>

<style scoped>
    .goods-channel {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 20px;
        /*padding-bottom: 10px;*/
    }

    .goods-channel .item {
        width: 80px;
        height: 80px;
        /*!*margin-left: -40px;*/
        position: relative;
        left: 50%;
        border-radius: 50%;
        /*padding-top: 10px;*/
    }

    .goods-channel img {
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .goods-channel span {
        display: block;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #333;
    }

    .goodspush img {
        height: 100%;
    }

    .bcont {
        width: 100%;
        padding: 0 5px;
    }

    .bcont img {
        width: 100%;
        height: auto;
    }
</style>
